<template>
  <div class="lowCodeForm">
    <div class="form-table">
      <div class="form-table-head">
        <div>请选择表单</div>
        <div @click="goBack" class="form-table-head-back">返回</div>
      </div>
      <div class="form-table-body">
        <div class="form-table-body-header">
          <div>请选择账户下的表单进行关联</div>
          <div>
            <el-input
              v-model="search"
              placeholder="请输入表单名称"
              clearable
              style="width: 240px; margin-right: 1rem"
            ></el-input>
            <el-button type="primary">搜索</el-button>
            <el-button @click="showForm" type="primary">新建表单</el-button>
          </div>
        </div>
        <el-table
          :data="tableData"
          header-row-class-name="form-table-body-row"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="表单名称" prop="value1" width="120">
          </el-table-column>
          <el-table-column prop="value2" label="创建时间" width="" />
          <el-table-column prop="value3" label="操作" width="80">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="showPreview(scope.row.value3)"
                >预览</el-button
              >
              <!-- {{ scope.row.date }} -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        ></el-pagination>
      </div>
      <div class="form-table-foot">
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div>
  </div>

  <el-dialog v-if="previewVisible" v-model="previewVisible" :before-close="closePreview" title="表单预览" width="400">
    <preview  v-model="data"></preview>
  </el-dialog>

</template>

<script lang="jsx" setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import preview from "@/components/LowCodeForm/preview.jsx";
const search = ref("");
const tableData = ref([
  {
    id: "1",
    value1: "王小虎",
    value2: "2016-05-02",
    value3:
      '{"container":{"labelPosition":"top","titleForm":"","titleSubtile":"","formNeed":"need","btnName":"提交","formTitle":"testForm","formSubtitle":"miaoshu"},"blocks":[{"id":"1","label":"填表人姓名","tempType":"input","type":"text","placeholder":"请输入","value":"","regex":"","key":"input","props":{"hint":{"type":"texts","txt":"用于搜集填写者本人姓名"},"label":{"type":"input","valid":[{"required":true,"message":"请输入","trigger":"blur"}],"label":"姓名"},"labelDetail":{"type":"input","label":"字段说明"},"propName":{"type":"input","valid":[{"required":false,"message":"请输入","trigger":"blur"},{"required":false}],"label":"属性名"},"mustFill":{"type":"select","valid":[{"required":true,"message":"请选择必填","trigger":"change"}],"label":"必填","options":[{"label":"必填","value":true},{"label":"非必填","value":false}]}},"keyName":"6r2egqs9ipv","propName":"k6r2egqs9ipv","focus":false,"labelDetail":"name","mustFill":true},{"id":"7","label":"表格","tempType":"table","value":[],"regex":"","key":"table","props":{"label":{"type":"input","valid":[{"required":true,"message":"请输入","trigger":"blur"}],"label":"字段名"},"labelDetail":{"type":"input","label":"字段说明"},"value":{"type":"table","label":"标题列"},"propName":{"type":"input","valid":[{"required":false,"message":"请输入","trigger":"blur"},{"required":false}],"label":"属性名"},"mustFill":{"type":"select","valid":[{"required":true,"message":"请选择必填","trigger":"change"}],"label":"必填","options":[{"label":"必填","value":true},{"label":"非必填","value":false}]}},"keyName":"uiesrwprkwc","propName":"kuiesrwprkwc","focus":false,"mustFill":true,"labelDetail":"table"},{"id":"10","label":"检查项","tempType":"inspect","key":"inspect","value":[],"props":{"label":{"type":"input","valid":[{"required":true,"message":"请输入","trigger":"blur"}],"label":"字段名"},"labelDetail":{"type":"input","label":"字段说明"},"value":{"type":"table","label":"检查项","isInspect":true},"propName":{"type":"input","valid":[{"required":false,"message":"请输入","trigger":"blur"},{"required":false}],"label":"属性名"},"mustFill":{"type":"select","valid":[{"required":true,"message":"请选择必填","trigger":"change"}],"label":"必填","options":[{"label":"必填","value":true},{"label":"非必填","value":false}]}},"keyName":"3iu7bbuo6ln","propName":"k3iu7bbuo6ln","focus":false,"mustFill":true},{"id":"8","label":"单选项","tempType":"radio","regex":"","key":"radio","option":[{"label":"选项11","value":"1"},{"label":"选项22","value":"2"}],"value":"","props":{"label":{"type":"input","valid":[{"required":true,"message":"请输入","trigger":"blur"}],"label":"字段名"},"labelDetail":{"type":"input","label":"字段说明"},"option":{"type":"radio","label":"选项"},"propName":{"type":"input","valid":[{"required":false,"message":"请输入","trigger":"blur"},{"required":false}],"label":"属性名"},"mustFill":{"type":"select","valid":[{"required":true,"message":"请选择必填","trigger":"change"}],"label":"必填","options":[{"label":"必填","value":true},{"label":"非必填","value":false}]}},"keyName":"ok0cz974s7f","propName":"kok0cz974s7f","focus":false,"mustFill":true},{"id":"12","label":"地址1","tempType":"address","key":"address","value":[],"props":{"label":{"type":"input","valid":[{"required":true,"message":"请输入","trigger":"blur"}],"label":"字段名"},"labelDetail":{"type":"input","label":"字段说明"},"propName":{"type":"input","valid":[{"required":false,"message":"请输入","trigger":"blur"},{"required":false}],"label":"属性名"},"mustFill":{"type":"select","valid":[{"required":true,"message":"请选择必填","trigger":"change"}],"label":"必填","options":[{"label":"必填","value":true},{"label":"非必填","value":false}]}},"keyName":"e4dhjhtpcyh","propName":"ke4dhjhtpcyh","focus":false,"mustFill":true},{"id":"13","label":"手写签名","tempType":"signature","key":"signature","value":"","props":{"label":{"type":"input","valid":[{"required":true,"message":"请输入","trigger":"blur"}],"label":"字段名"},"labelDetail":{"type":"input","label":"字段说明"},"propName":{"type":"input","valid":[{"required":false,"message":"请输入","trigger":"blur"},{"required":false}],"label":"属性名"},"mustFill":{"type":"select","valid":[{"required":true,"message":"请选择必填","trigger":"change"}],"label":"必填","options":[{"label":"必填","value":true},{"label":"非必填","value":false}]}},"keyName":"6is6iv06oms","propName":"k6is6iv06oms","focus":false,"mustFill":true},{"id":"14","label":"图片","tempType":"upload","key":"upload","type":"image","value":[],"props":{"label":{"type":"input","valid":[{"required":true,"message":"请输入","trigger":"blur"}],"label":"字段名"},"labelDetail":{"type":"input","label":"字段说明"},"propName":{"type":"input","valid":[{"required":false,"message":"请输入","trigger":"blur"},{"required":false}],"label":"属性名"},"mustFill":{"type":"select","valid":[{"required":true,"message":"请选择必填","trigger":"change"}],"label":"必填","options":[{"label":"必填","value":true},{"label":"非必填","value":false}]}},"keyName":"v6t7ypqjijt","propName":"kv6t7ypqjijt","focus":true,"mustFill":true}],"model":[],"propNames":[{"keyName":"6r2egqs9ipv","propName":"k6r2egqs9ipv"},{"keyName":"uiesrwprkwc","propName":"kuiesrwprkwc"},{"keyName":"3iu7bbuo6ln","propName":"k3iu7bbuo6ln"},{"keyName":"ok0cz974s7f","propName":"kok0cz974s7f"},{"keyName":"e4dhjhtpcyh","propName":"ke4dhjhtpcyh"},{"keyName":"6is6iv06oms","propName":"k6is6iv06oms"},{"keyName":"v6t7ypqjijt","propName":"kv6t7ypqjijt"}]}',
  },
]);
const previewVisible = ref(false);
const goBack = () => {
  router.go(-1);
};
const closePreview = () => {
  console.log(999,'closePreview');
  
  previewVisible.value = false;
};
let { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();
const data = ref({
  container: {
    labelPosition: "top",
    titleForm: "",
    titleSubtile: "",
    formNeed: "",
    btnName: "提交",
  },
  blocks: [],
  model: [],
  propNames: [], //表单字段验重
});
//预览
const showPreview = (str) => {
  //jsx preview

  if (str) {
    try {
      data.value = JSON.parse(str);
      previewVisible.value = true;
    } catch (err) {
      console.log("err", err);
    }
  }
};

//展示“新增表单”
const showForm = () => {
  //route
  router.push({
    path: "/lowCodeForm",
  });
};

const getTableData = (e) => {};

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss">
.lowCodeForm {
  height: calc(100vh - 150px);
  box-sizing: border-box;
  &-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--bg-color);
  }
  .form-table {
    display: flex;
    height: 100%;
    background-color: var(--bg-color);
    box-sizing: border-box;
    flex-direction: column;
    gap: 1rem;
    &-head {
      display: flex;
      justify-content: space-between;
      background-color: white;
      padding: 1rem;

      &-back {
        cursor: pointer;
        color: var(--primary-main-color);
        &:hover {
          //下划线
          text-decoration: underline;
        }
      }
    }
    &-body {
      flex: 1;
      background-color: white;
      box-sizing: border-box;
      .el-table th.el-table__cell {
        background-color: var(--bg-color) !important;
      }
      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
      }
      &-row {
        color: var(--font-main-color);
        height: 50px;
      }
    }
    &-foot {
      background-color: white;
      text-align: right;
      padding: 0.5rem;
    }
  }
}
</style>
